<template>
  <div class="home">
    <el-container class="home_container">
      <!-- 头部区域 -->
      <el-header class="home_header">
        <div class="login">
          <img src="../assets/img/3.jpg" alt="logo">
          <h2> Daes Huang </h2>
        </div>
        <div class="out">
          <el-button type="info" round size="small" @click="handleOut">退出</el-button>
        </div>
      </el-header>

      <!-- 页面主体区域 -->
      <el-container>
        <!-- 侧边栏区域 -->
        <el-aside :width=" isCollapse ? '64px' : '200px' " class="home_aside">
          <div class="tog_button" @click="handleButton">|||</div>
          <!-- 侧边栏菜单区域 -->
           <el-menu
            background-color="#323744"
            text-color="#fff"
            active-text-color="#409EFF"
            :default-active="isActive"
            :collapse-transition="false"
            :collapse="isCollapse"
            @select="fn"
            router>
            <!-- 一级菜单 -->
            <el-submenu index="1">
              <!-- 一级菜单模板区域 -->
              <template slot="title">
                <i class="el-icon-s-order"></i>
                <span>文章管理</span>
              </template>
              <!-- 二级菜单 -->
              <el-menu-item-group>
                <el-menu-item index="/article">
                  <i class="el-icon-menu"></i>
                  <span>文章列表</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!--右侧内容区域 -->
        <el-main class="home_main">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 是否展开
      isCollapse: false,
      // 高亮列表
      isActive: ''
    }
  },
  methods: {
    handleButton () {
      this.isCollapse = !this.isCollapse
    },
    fn (index) {
      this.isActive = index
    },
    // 退出账户
    handleOut () {
      // 清理全部session
      window.sessionStorage.clear()
      // 跳转到login页面
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.home,el-container{
  height: 100%;
  width: 100%;
  color: #fff;
}
.home_container {
  height: 100%;
   width: 100%;
}
.home_header{
  height: 180px;
  width: 100%;
  background-color: #373c41;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .login{
    display: flex;
    justify-content: space-between;
    align-items: center;
    img{
      height: 30px;
    }
  }
}
.home_aside{
  background-color: #323744;
}
.home_main{
  background-color: #eaedf2;
  color: #111;
}
.el-menu{
  border: none;
}
.tog_button{
  width: 100%;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  background-color: #485164;
  text-align: center;
  letter-spacing: 0.22rem;
  cursor: pointer;
}
</style>
